<template>
	<div class="word">
		<div class="words-bg">
			<van-nav-bar title="背单词" :border="false" safe-area-inset-top left-arrow @click-left="onBack" />
			<comWord @getWordData="getWordData"></comWord>
		</div>
		<div class="word-footer">
			<div class="timer">
				<div class="margin-right-xs flex align-center">
					<img class="tips" src="@/assets/word/tips.png" />
					<span class="text-black" v-if="userWordsInfo.today_count==0">
						今日计划已完成
					</span>
					<span class="text-black" v-else>今日需新学<span class="text-green text-lg">
							{{userWordsInfo.today_count}}</span>/{{ userWordsInfo.plan_count }}</span>
				</div>
				<!-- <div class="margin-lr-xs">
                    <span class="text-black margin-left-sm">今日复习</span><span class="text-green text-lg">0</span>
                </div> -->
			</div>
			<div class="flex justify-between margin-lr-sm margin-top-sm">
				<button class="cu-btn lg basis-df round line-gray text-black margin-right-sm" @click="onRecite">
					开始背单词
				</button>
				<button class="cu-btn lg basis-df round bg-gradual-green text-white margin-left-sm" @click="onWord">
					单词PK
				</button>
			</div>
			<div class="footer-bg"></div>
		</div>
	</div>
</template>

<script setup>
	import {
		useRouter
	} from "vue-router";
	import comWord from "./components/comWord.vue";
	import {
		showDialog
	} from "vant";
	import {
		ref
	} from "vue";
	const userWordsInfo = ref({
		today_count: 0,
		plan_count: 0,
	});
	const router = useRouter();

	const onRecite = () => {
		localStorage.setItem("recitingWordCurrent", 1)
		// if (userWordsInfo.value.today_count == 0 || userWordsInfo.value.today_count < 0) {
		// 	showDialog({
		// 		title: '提示',
		// 		message: '今日计划已完成',
		// 	})
		// } else {
		router.push("/word/start-word");
		// }
	};
	const getWordData = (val) => {
		// console.log(val)
		if (val.isset) {
			userWordsInfo.value = val;
		} else {
			router.push("/word/recite");
		}
	};
	const onPlan = () => {
		router.push("/word/plan-word");
	};
	const onBack = () => {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.android.goBack();
		} else if (isiOS) {
			window.webkit.messageHandlers.back.postMessage("")
		}
	};
	const onWord = () => {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
		if (isAndroid) {
			window.android.goWordsPK();
		} else if (isiOS) {
			window.webkit.messageHandlers.goWordsPK.postMessage("");
		}
	};
</script>

<style lang="scss" scoped>
	@import "./style/icon.scss";
	@import "./style/index.scss";
	@import "./style/main.scss";

	.tips {
		width: 14px;
		height: 14px;
		margin-right: 10px;
	}

	.word {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #f5f5f5;

		:deep(.van-nav-bar) {
			color: #fff;
			background: transparent;
		}

		:deep(.van-icon-arrow-left) {
			color: #fff !important;
			font-size: 20px;
		}

		:deep(.van-nav-bar__title) {
			font-size: 18px;
			font-weight: 500;
			color: #fff;
		}
	}

	.timer {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 18px;
		height: 28px;
		margin: 0 10px;
		font-size: 14px;
		font-weight: 500;
		background-color: rgba(12, 183, 108, 0.1);
	}

	.footer-bg {
		height: 37px;
		margin-top: 10px;
		background-color: #F5F5F5;
	}
</style>